<!--
 * @Author: GKN
 * @Date: 2023-07-24 14:08:42
 * @LastEditTime: 2024-01-24 15:53:19
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\imgview.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="imgview flex flex-j-c cursor-p border-r6">
        <div v-if="src" class="ad-img" style="position: relative;"> 
            <img v-if="type=='ad'" :src="imgurl" alt="" class="ad-img" style="filter: blur(10px);">
            <div v-if="type=='logo'" class="ad-img" style="background: #fff;">

            </div>
            <div class="ad-img" style="width: 100%;height: 100%;position: absolute;top:0;z-index: 1;">
                <!-- <img v-if="type!=='logo'" :src="imgurl" alt="" style="object-fit: scale-down;width:100%;"> -->
                <!-- <el-image  v-if="type!=='logo'" style="width: 100%; height: 100%" :src="imgurl" fit="contain" /> -->
                <img v-if="type=='img'" :src="proxy.$api.prefix_img+src" style="width:100%;height:100%;object-fit: cover;" alt="" />
                <img v-if="type=='ad'" :src="proxy.$api.prefix_img+src" style="width:100%;height:100%;object-fit: cover;" alt="" />
                <img v-if="type=='logo'" :src="proxy.$api.prefix_img+src" style="width:100%;height:100%;object-fit: contain;" alt="" />
            </div>
        </div>
        
        <el-empty v-if="!src" :image-size="size" :description="description"  >
            <template v-slot:description>
                
            </template>

        </el-empty>
    </div>
</template>
<script setup>
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import rgbaster from 'rgbaster';
const props = defineProps({
    src: {
        type: String,
        default: ""
    },
    description:{
        type: String,
        default: ""
    },
    size:{
        type: String,
        default: "100"
    },
    type:{
        type: String,
        default: "img"
    }
  })
const imgurl = proxy.$api.prefix_img+encodeURI(props.src)
</script>
  <style lang='less' scoped>
      .imgview{
        width:100%;
        height: 100%;
        background: #f6f7f9;
      }
  </style>
  